$donation: () !default;

$donation: map-merge(
    (
        btnColors: #10ac84,
        qrcodeBackground: #fff,
    ),
    $donation
) !default;

$donationBtnColors: map-get($donation, btnColors);
$donationQrcodeBackground: map-get($donation, qrcodeBackground);

#custom-donation-btn {
    background-color: $donationBtnColors !important;
    padding: 4px 10px !important;
    &:hover {
        box-shadow: 0 0 5px #999;
        transform: scale(1.1);
        transform: translateY(-2px);
        transition: all 0.2s;
    }
}

#custom-donation-qrcode {
    display: none;
    position: relative;
    cursor: pointer;
    z-index: 999999999;
    text-align: center;
    & > div {
        display: inline-block;
        margin: 0 auto;
        margin-right: 20px;
        width: 180px;
        height: 180px;
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 5px;
        background-color: $donationQrcodeBackground;
    }
}

@media screen and (max-width: 767px) {
    #blog_post_info_block #blog_post_info #green_channel {
        justify-content: center;
    }
    #custom-donation-btn {
        margin: 3px !important;
        &:hover {
            transform: none;
        }
    }
    #custom-donation-qrcode {
        & > div {
            margin-right: 0;
            width: 100%;
            height: 320px;
        }
    }
}
